
<template>
  <!--  布局-->
  <div class="layout">
      <el-container>

        <el-aside width="200px">
          <Aside></Aside>
        </el-aside>

        <el-container>
          <el-header>
            <Header></Header>
          </el-header>
            <el-main>
              <router-view></router-view>
            </el-main>
        </el-container>
      </el-container>
  </div>

</template>

<style scoped>


  body {
    overflow: auto;
  }
  .layout {
    background-color: #f5f5f5;
  }

  .el-main {
    height: 915px;
    background-color: #ffffff;
    border-radius: 10px;
    margin-left: 20px;
    width: 100%;
  }

  .el-aside {
    margin-top: -23px;
    border-radius: 10px;
    height: 100%;

  }
  .el-header {
    background-color: #ffffff;
    margin-right: -20px;
    margin-left: -20px;
    margin-bottom: 20px;
  }

</style>


<script>

  import Aside from "./layout/Navigation";
  import Header from "./layout/Header";
  import Footer from "./layout/Footer";
  export default {
    name: "Index",
    components: {Footer, Header, Aside},

  }
</script>
